<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>例子1</title>
    <!--[if lt IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
	<![endif]-->
    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
    <script type="text/javascript" src="../dist/clock.js"></script>
    <style>
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <canvas id="demo1"></canvas>
    <canvas id="demo2"></canvas>
    <canvas id="demo3"></canvas>
    <canvas id="demo4"></canvas>
    <script type="text/javascript">
        //参数1可传入dom对象，options可不传
        new Clock(document.getElementById("demo1")).run();

        //参数1可传入dom id值,参数2可传入自己想要的样式
        new Clock("demo2", {
            scaleType: "roman",//显示罗马数字
            borderColor: "brown",//边框颜色
            backgroundColor: "black",//表盘背景色
            hourHandColor: "white",//时针颜色
            minuteHandColor: "white",//分针颜色
            hourColor: "white",//小时数字颜色
            scaleColor: "yellow"//刻度线颜色
        }).run();

        new Clock("demo3", {
            borderImage: "./img/border.png",
            backgroundImage: "./img/bg.jpg"
        }).run();

        new Clock("demo4", {
            borderImage: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553805386&di=ec656215a2958d617ef30631e96304e0&imgtype=0&src=http%3A%2F%2Fimg1.ali213.net%2Fshouyou%2Fupload%2Fimage%2F2018%2F07%2F09%2F584_2018070952816881.png",
            backgroundImage: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553773235&di=1c768f80fc088c2edc20fa75af77c515&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F03%2F20160703164252_2WySB.jpeg"
        }).run();
    </script>
</body>

</html>